<template>
	<el-dialog :title="type + '通知记录'" v-model="visible" :close-on-click-modal="false" :footer="null" draggable width="900">
		<el-table
			width="160px"
			:data="state.dataList"
			v-loading="state.loading"
			border
			:cell-style="tableStyle.cellStyle"
			:header-cell-style="tableStyle.headerCellStyle"
		>
			<el-table-column prop="createTime" label="发送时间" show-overflow-tooltip />
			<el-table-column prop="receiverId" label="接收号码" show-overflow-tooltip />
			<el-table-column prop="receiverName" label="接警人员" show-overflow-tooltip />
			<el-table-column prop="sendResults" label="通知状态" show-overflow-toolti>
				<template #default="{ row }">
					<div>
						<el-tag v-if="row.sendResults === 10">默认</el-tag>
						<el-tag v-if="row.sendResults === 20" type="success">发送成功</el-tag>
						<el-tag v-if="row.sendResults === 30" type="danger">失败</el-tag>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="sketch" label="通知结果" show-overflow-tooltip />
		</el-table>
	</el-dialog>
</template>

<script setup lang="ts" name="systemBasicNotificationRecord">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { getObj } from '/@/api/alarm/basicNotificationRecord';
const state: BasicTableProps = reactive<BasicTableProps>({
	dataList: [],
	createdIsNeed: false,
});
const type = ref('');

//  table hook
const { tableStyle } = useTable(state);

// 定义变量内容
const visible = ref(false);

// 打开弹窗
const openDialog = (id: string, tp: string) => {
	visible.value = true;
	type.value = tp;
	state.dataList = [];
	getObj(id).then((res) => {
		state.dataList = [res.data];
	});
};
// 暴露变量
defineExpose({
	openDialog,
});
</script>
